
// region-select的change事件 = function() {
//     渲染新的表格(根据select选项获取数据)
// }
let checkboxs = document.querySelectorAll("#region-select input[type=checkbox]")
let areaBoxs = area.querySelectorAll("input")
let productsBoxs = products.querySelectorAll("input")
let myChart1 = ""
let myChart2 = ""

// 为每个按钮注册事件
for (let i = 0; i < checkboxs.length; i++) {
    const element = checkboxs[i];
    if (element.value == "全选") {
        continue
    }
    element.addEventListener("change", function (e) {
        let areaArr = area.querySelectorAll("input:checked")
        let productsArr = products.querySelectorAll("input:checked")
        if (areaArr.length == 1) {
            areaArr[0].disabled = "true"
        } else {
            Array.prototype.forEach.call(areaArr, function (e) {
                e.disabled = false
            })
        }
        if (productsArr.length == 1) {
            productsArr[0].disabled = "true"
        } else {
            Array.prototype.forEach.call(productsArr, function (e) {
                e.disabled = false
            })
        }
        getSelectArr()
        loadWindow()
        judgeSelect()
        let output1 = getData()
        createCharts(output1)
        createTable(output1)
    })
}
// 根据select选项获取数据
function getData() {
    let areaArr = area.querySelectorAll("input:checked")
    let areaValue = Array.prototype.map.call(areaArr, function (e) {
        return e.value
    })
    let productsArr = products.querySelectorAll("input:checked")
    let productsValue = Array.prototype.map.call(productsArr, function (e) {
        return e.value
    })
    let data = sourceData
    let ourput = []
    for (let i = 0; i < data.length; i++) {
        const e = data[i];
        if ((areaValue.indexOf(e.region) != -1) && (productsValue.indexOf(e.product) != -1)) {
            ourput.push(e)
        }
    }
    return ourput
}

// 渲染新的表格
function createTable(data) {
    table.innerHTML = ""
    let areaArr = area.querySelectorAll("input:checked")
    areaArr = Array.prototype.filter.call(areaArr, function (e) {
        return (e.value != "全选")
    })
    let productsArr = products.querySelectorAll("input:checked")
    productsArr = Array.prototype.filter.call(productsArr, function (e) {
        return (e.value != "全选")
    })

    let tb = document.createElement("table")
    tb.className = "table table-bordered"
    let thead = document.createElement("thead")
    let tr = document.createElement("tr")
    let thlist = ["商品", "地区", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
    if (areaArr.length == 1) {
        thlist = ["地区", "商品", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
    }

    thlist.forEach(function (e) {
        let th = document.createElement("th")
        th.innerHTML = e
        tr.appendChild(th)
    })
    let tbody = document.createElement("tbody")
    data.forEach(function (e, i) {
        let tr = document.createElement("tr")
        tr.id = i
        let td1 = document.createElement("td")
        let td2 = document.createElement("td")
        if (areaArr.length == 1) {
            if (i % productsArr.length == 0) {
                td1.innerHTML = e.region
                td1.rowSpan = productsArr.length
                td1.className = "noactive"
                tr.appendChild(td1)
            }
            td2.innerHTML = e.product
            td2.className = "noactive"
        } else {

            if (i % areaArr.length == 0) {
                td1.innerHTML = e.product
                td1.rowSpan = areaArr.length
                td1.className = "noactive"
                tr.appendChild(td1)
            }
            td2.innerHTML = e.region
            td2.className = "noactive"
        }
        tr.appendChild(td2)
        e.sale.forEach(function (v, i) {
            let td = document.createElement("td")
            td.innerHTML = "<span>" + v + "</span><span class='icon glyphicon glyphicon-pencil'><span>"
            let div = document.createElement("div")
            div.className = "edit"
            let input = document.createElement("input")
            input.value = v
            input.type = "text"
            input.setAttribute("index", i)
            div.appendChild(input)
            let span1 = document.createElement("span")
            span1.className = "confirm glyphicon glyphicon-ok"
            div.appendChild(span1)
            let span2 = document.createElement("span")
            span2.className = "cancel glyphicon glyphicon-remove"
            div.appendChild(span2)
            td.appendChild(div)
            tr.appendChild(td)
        })
        tbody.appendChild(tr)
    })
    thead.appendChild(tr)
    tb.appendChild(thead)
    tb.appendChild(tbody)
    table.appendChild(tb)
}

// 单独注册全选按钮事件
areaBoxs[0].addEventListener("click", function () {
    if (this.checked) {
        selectAll(this)
        let output = getData()
        createTable(output)
    } else {
        judgeSelect()
    }
})
// 单独注册全选按钮事件
productsBoxs[0].addEventListener("click", function () {
    if (this.checked) {
        selectAll(this)
        let output = getData()
        createTable(output)
    } else {
        judgeSelect()
    }
})
// 全选
function selectAll(e) {
    if (e == areaBoxs[0]) {
        Array.prototype.forEach.call(areaBoxs, function (e) {
            e.checked = "true"
        })
    } else if (e == productsBoxs[0]) {
        Array.prototype.forEach.call(productsBoxs, function (e) {
            e.checked = "true"
        })
    } else {
        Array.prototype.forEach.call(areaBoxs, function (e) {
            e.checked = "true"
        })
        Array.prototype.forEach.call(productsBoxs, function (e) {
            e.checked = "true"
        })
    }
}
// 判断是不是全选
function judgeSelect() {
    let areaArr = area.querySelectorAll("input:checked")
    let productsArr = products.querySelectorAll("input:checked")
    let areaSelectAll = true
    let productsSelectAll = true
    for (let i = 0; i < areaBoxs.length; i++) {
        if (i == 0) {
            continue
        }
        const element = areaBoxs[i];
        if (!element.checked) {
            areaSelectAll = false
            break
        }
    }
    for (let j = 0; j < productsBoxs.length; j++) {
        if (j == 0) {
            continue
        }
        const element = productsBoxs[j];
        if (!element.checked) {
            productsSelectAll = false
            break
        }
    }
    areaBoxs[0].checked = areaSelectAll
    productsBoxs[0].checked = productsSelectAll
}
// 生成图像，使用 echarts
function createCharts(mydata) {
    let barData = []
    let lineData = []
    let legendData = []
    let bar = document.getElementById('bar')
    let line = document.getElementById('line')
    if (Object.prototype.toString.call(mydata) == "[object Object]") {
        mydata = [mydata]
    }

    Array.prototype.forEach.call(mydata, function (e, i) {
        let obj = {}
        let obj1 = {}
        obj.name = obj1.name = e.region + "-" + e.product
        obj.type = "bar"
        obj1.type = "line"
        obj.data = obj1.data = e.sale
        barData.push(obj)
        lineData.push(obj1)
    })
    barData.forEach(function (e) {
        legendData.push(e.name)
    })
    if (myChart1) {
        myChart1.dispose()
    }
    if (myChart2) {
        myChart2.dispose()
    }
    myChart1 = echarts.init(bar)
    myChart2 = echarts.init(line)

    let option = {
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        title: {
            text: 'MIS系统 - 我是小卖家',
            show: false
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: [
            {
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
        ],
        legend: {
            data: legendData
        },
        yAxis: {},
        series: barData
    };
    let option1 = {
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        title: {
            text: 'MIS系统 - 我是小卖家',
            show: false
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [
            {
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
        ],
        legend: {
            data: legendData
        },
        yAxis: {},
        series: lineData
    };
    myChart1.setOption(option, true)
    myChart2.setOption(option1, true)
}

// 初始化
loadWindow()
selectAll()
let output = getData()
createTable(output)
createCharts(output)
getSelectArr()

// 监听鼠标移入移出事件
table.addEventListener("mouseover", function (e) {
    let target = e.target
    if (target.nodeName == "TD") {
        let tr = target.parentNode
        let id = tr.id
        let mousedata = getData()
        createCharts(mousedata[id])
    }
})
table.addEventListener("mouseout", function (e) {
    let target = e.target
    if (target.nodeName == "TD") {
        let mousedata = getData()
        createCharts(mousedata)
    }
})

window.addEventListener("popstate",formhashselect)